<template>
  <el-dialog
    class="upload-features-file-comp"
    title="上传文件"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    append-to-body
    :visible="visible"
    :width="$setRem(600)"
    :before-close="handleCancel">
    <div class="form-container">
      <el-form
        :model="ruleForm"
        :rules="rules"
        :label-width="$setRem(160)"
        ref="featuresForm"
        class="rule-form">
        <el-form-item label="分组类型" prop="dirId" required>
          <el-select v-model="ruleForm.dirId" placeholder="请选择分组类型">
            <el-option
              v-for="item in dirList"
              :value="item.id"
              :label="item.dirName"
              :key="item.id"
              :title="item.dirName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件名称" prop="fileName" required>
          <el-input placeholder="请输入文件名称" v-model="ruleForm.fileName" clearable></el-input>
        </el-form-item>
        <el-form-item class="form-item-left" label="附件" prop="fileUrl" required>
          <el-input v-if="fileType === '2'" placeholder="请输入链接" v-model="ruleForm.fileUrl" clearable></el-input>
          <el-upload
            v-else
            class="upload-demo"
            ref="upload"
            :accept="accept"
            :multiple="false"
            action="#"
            :on-remove="handleRemove"
            :on-change="beforeAvatarUpload"
            :file-list="fileList"
            :auto-upload="false">
            <el-button slot="trigger" :loading="picLoading" size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入备注"
            v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="handleSubmit">
        确 认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    dirId: {
      type: String,
      default: ''
    },
    dirList: {
      type: Array,
      default: () => []
    },
    accept: {
      type: String,
      default: '.jpg,.png,.jpeg'
    },
    fileType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      picLoading: false,
      fileList: [],
      ruleForm: {
        dirId: '',
        remark: '',
        fileName: '',
        fileUrl: ''
      },
      // 校验规则
      rules: {
        fileUrl: [
          { required: true, message: '请上传附件' },
        ],
        dirId: [
          { required: true, message: '请选择分组类型' }
        ],
        fileName: [
          { required: true, message: '请输入文件名称' }
        ]
      }
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  watch: {
    visible(val) {
      if (!val) {
        this.ruleForm = {
          dirId: '',
          fileName: '',
          fileUrl: '',
          remark: ''
        };
        this.fileList = [];
      }
    },
    dirId(id) {
      this.ruleForm = {
        ...this.ruleForm,
        dirId: id
      };
    }
  },
  methods: {
    // 关闭、取消
    handleCancel() {
      this.$emit('cancel');
    },
    // 上传图片
    async beforeAvatarUpload(file) {
      this.fileList = [];
      const fm = new FormData();
      fm.append('file', file.raw);
      this.picLoading = true;
      const { success, data: { data }} = await this.$Model.fileUpload(fm);
      this.picLoading = false;
      if (success) {
        this.fileList = [{
          name: file.name,
          url: this.$checkUrl(data)
        }];
        this.$refs.featuresForm.clearValidate('fileUrl');
        this.ruleForm.fileUrl = data;
      }
    },
    // 删除图片
    async handleRemove() {
      if (!this.ruleForm.fileUrl) return;
      const { success } = await this.$Model.fileDelete({
        filePath: this.ruleForm.fileUrl
      });
      if (success) this.ruleForm = {
        ...this.ruleForm,
        fileUrl: ''
      };
    },
    handleSubmit() {
      this.$refs.featuresForm.validate(valid => {
        if (valid) {
          this.$emit('submit', this.ruleForm);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .form-container {
    /deep/ .el-form-item__label {
      color: #fff;
      .el-upload-list__item-name {
        color: #fff;
      }
    }
    /deep/ .el-input, .el-select, .el-textarea {
      width: 300px;
    }
  }
</style>
